<template>
  <v-card class="login-card">
    <v-card-title class="login-title">
      <span class="login-title-text">登录</span>
    </v-card-title>
    <v-card-text>
      <v-form @submit.prevent="login">
        <v-text-field v-model="email" label="邮箱" outlined required></v-text-field>
        <v-text-field v-model="password" label="密码" type="password" outlined required></v-text-field>
        <v-btn type="submit" color="primary" block>登录</v-btn>
      </v-form>
    </v-card-text>
  </v-card>
</template>
  
<script>
import qs from 'qs'
import utils from './../../utils'
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    login() {
      const requestData = {
        grant_type: 'password',
        client_id: 'console-client-demo',
        client_secret: '1q2w3e*',
        scope: 'openid profile email offline_access',
        username: this.email,
        password: this.password,
      }
      this.$http.post(`/connect/token`, qs.stringify(requestData))
        .then(r => {
          utils.setTokenInfo(r.access_token, r.refresh_token)
          this.$router.push(`/index`)
        }, error => {

        })
    }
  }
};
</script>
  
<style scoped>
.login-card {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.login-title {
  display: flex;
  justify-content: center;
}

.login-title-text {
  font-size: 24px;
  font-weight: bold;
}

.login-card v-form {
  margin-top: 20px;
}

.login-card v-btn {
  margin-top: 20px;
}
</style>
  